import React, { useEffect,forwardRef,useImperativeHandle,useState,useRef } from 'react'
import s from './style.module.less'
import axios from '@/utils/axios.js'
import ListItem from './listItem'
const MapList = forwardRef(({...props},ref)=>{
  let originY
  let endY
  const [list, setList] = useState([]);
  useEffect(()=>{
    axios.get(`/house/find?id=${props?.poltInfo?.id || 1}`).then((res)=>{{
      if (res.data.list.length >= 0) {
        console.log(res.data.list);
        setList(res.data.list)
      }
    }})
  },[props.id])
  const [top, setTop] = useState(1000)
    const dragRef = useRef(null)
    const handleMousedown = (_val) => {
      return (e) => {
        console.log(_val,'_val');
      e.stopPropagation()
      setTop(_val)
    }
    };
    const emit = ()=>{
      setTop(500)
    }
    const close = ()=>{
      setTop(1000)
    }
    useImperativeHandle(ref, () => ({
      emit,
      close
    }),[emit,close])
    const onTouchStart = (e) => {

      originY = e.touches[0].clientY
    }
    const onTouchEnd = (e) => {

      endY = e.changedTouches[0].clientY
      if (originY - endY > 50) {
        setTop(0)
      }
      if (originY - endY <50) {
        setTop(500)
      }
    }
    const onTouchMove = (e) => {
      let y = e.touches[0].clientY
      setTop(y)
    }
    return (
        <div style={{top: top + 'px' }}
            ref={dragRef}
            className={s.listDom}      
            >
              <div  onTouchStart={onTouchStart} onTouchEnd={onTouchEnd} className={s.listTitle} >
                  {
                    top === 0 ? <svg onMouseDown={handleMousedown(500)} style={{marginRight: top === 0 ? '180px' :'153px'}} width="25" height="25" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M36 18L24 30L12 18" stroke="#bdb7b7" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round"/></svg> :  <svg onMouseDown={handleMousedown(0)} style={{marginRight:'153px'}} width="25" height="25" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 30L25 18L37 30" stroke="#bdb7b7" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  } 
                  {
                    top === 0 ? undefined : <svg onMouseDown={handleMousedown(1000)} width="25" height="25" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 14L34 34" stroke="#bdb7b7" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round"/><path d="M14 34L34 14" stroke="#bdb7b7" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  }    
              </div>
              <div className='p-6 pt-0'>
                <div className={s.listContentTop}>
                    <div className={s.poltName}>{props?.poltInfo?.name}<svg width="16" height="16" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 12L31 24L19 36" stroke="#020202" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round"/></svg></div>
                    <div style={{
                      display:'flex',
                      justifyContent:'space-between',
                      width:'64px',
                      fontSize:'12px',
                      fontWeight:'normal',
                      color:'rgb(58 54 54)'
                    }}>
                      <div className="flex flex-col items-center text-neutral-600">
                      <svg width="16" height="16" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.85786 32.7574C6.23858 33.8432 4 35.3432 4 37C4 40.3137 12.9543 43 24 43C35.0457 43 44 40.3137 44 37C44 35.3432 41.7614 33.8432 38.1421 32.7574" stroke="#020202" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round"/><path d="M24 35C24 35 37 26.504 37 16.6818C37 9.67784 31.1797 4 24 4C16.8203 4 11 9.67784 11 16.6818C11 26.504 24 35 24 35Z" fill="none" stroke="#020202" strokeWidth="4" strokeLinejoin="round"/><path d="M24 22C26.7614 22 29 19.7614 29 17C29 14.2386 26.7614 12 24 12C21.2386 12 19 14.2386 19 17C19 19.7614 21.2386 22 24 22Z" fill="none" stroke="#020202" strokeWidth="4" strokeLinejoin="round"/></svg>
                        {top === 0 ? '' : "配套"} 
                      </div>
                      <div className="flex flex-col items-center text-neutral-600">
                      <svg width="16" height="16" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 8C8.92487 8 4 12.9249 4 19C4 30 17 40 24 42.3262C31 40 44 30 44 19C44 12.9249 39.0751 8 33 8C29.2797 8 25.9907 9.8469 24 12.6738C22.0093 9.8469 18.7203 8 15 8Z" fill="none" stroke="#020202" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round"/></svg>
                      {top === 0 ? '' : "关注"} 
                      </div>
                    </div>
                </div>
                {
                  top === 0 ? undefined : 
                  <div className='text-xs text-neutral-700'>
                    朝阳 | 在租59套
                  </div>
                }
                <div>
                  {
                    list.map((item,index)=>{
                    return  <ListItem key={index} itemInfo={
                      {
                       poltName: props?.poltInfo?.name,
                       ...item
                      }
                    }></ListItem>
                    })
                  }
                </div>
              </div>

        </div>
      )
})  

export default MapList